<template>
	<tui-tabbar :current="_current" color="#aaa" selectedColor="#000" :tabBar="tabBar" @click="tabbarSwitch" />
</template>

<script setup>
	import {
		onMounted,
		ref,
		watch,
		computed
	} from 'vue';

	import {
		useTabbarStatusStore
	} from '@/store/modules/tabbar/tabbar.js'

	const tabbarStatus = useTabbarStatusStore();
	const _current = computed(() => {		
		return tabbarStatus.currentIndex;
	});

	const emit = defineEmits(["tabChange"]);

	const tabBar = ref([{
			pagePath: '/pages/index/index',
			text: '首页',
			iconPath: '/static/images/tabbar/code_gray.png',
			selectedIconPath: '/static/images/tabbar/code_active.png',
		},
		{
			pagePath: '/pages/menu/menu',
			text: '点单',
			iconPath: '/static/images/tabbar/extend_gray.png',
			selectedIconPath: '/static/images/tabbar/extend_active.png',
		},
		{
			pagePath: '/pages/order/order',
			text: '订单',
			iconPath: '/static/images/tabbar/extend_gray.png',
			selectedIconPath: '/static/images/tabbar/extend_active.png',
		},
		{
			pagePath: '/pages/mine/mine',
			text: '我的',
			iconPath: '/static/images/tabbar/thor_gray.png',
			selectedIconPath: '/static/images/tabbar/thor_active.png',
			verify: true
		}
	])

	// 保存当前被选中的index
	function tabbarSwitch(e) {
		tabbarStatus.setTabbarStatus({currentIndex: e.index})
		emit('tabChange', e);
		uni.switchTab({
			url: e.pagePath,
		})		
	}
</script>

<style>

</style>